<!--
 * @Autor: dingxiaolin
 * @Date: 2021-06-15 08:56:27
 * @LastEditors: dingxiaolin
 * @LastEditTime: 2021-07-27 18:58:37
-->
<template>
    <a-card :bordered="false">
        <div class="table-page-search-wrapper">
            <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
                <a-row :gutter="[10, 0]">
                    <!-- default show area -->
                    <slot name="default"></slot>
                    <!-- advanced show area -->
                    <template v-if="advanced && showAdvanced">
                        <slot name="advanced"></slot>
                    </template>
                    <a-col :md="(!advanced && 8) || 24" :sm="24">
                        <span class="table-page-search-submitButtons" :style="(advanced && { float: 'right', overflow: 'hidden' }) || {}">
                            <a-button type="primary" @click="$emit('search')">查询</a-button>
                            <a-button style="margin-left: 8px" @click="$emit('reset')">重置</a-button>
                            <a @click="advanced = !advanced" style="margin-left: 8px" v-if="showAdvanced">
                                {{ advanced ? '收起' : '展开' }}
                                <UpOutlined v-if="advanced" />
                                <DownOutlined v-else />
                            </a>
                        </span>
                    </a-col>
                </a-row>
            </a-form>
        </div>
        <!-- 按钮组 -->
        <div class="table-operator">
            <slot name="button"></slot>
        </div>
    </a-card>
</template>

<script lang='ts'>
import { defineComponent, PropType, reactive, toRefs, ref, computed, watch, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from '@/store'
export default defineComponent({
    name: 'searchPanel',
    components: {},
    props: {
        /**
         * 是否可扩展
         */
        showAdvanced: {
            type: Boolean,
            default: true
        }
    },
    emits: ['reset', 'search'],
    setup(props, ctx) {
        const router = useRouter()
        const store = useStore()
        const state = reactive({
            advanced: false,
            queryParam: {}
        })
        onMounted(() => {})
        watch(
            () => store?.state.app.openAll,
            (v) => {
                if (!props.showAdvanced) return
                state.advanced = v
            },
            { immediate: true }
        )
        return {
            labelCol: {
                xs: { span: 24 },
                sm: { span: 6 }
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 18 }
            },
            ...toRefs(state)
        }
    }
})
</script>

<style lang='scss' scoped>
:deep(.ant-form-item) {
    margin-bottom: 15px;
}
.table-operator {
    margin: 0;
}
</style>
